<template>
  <div class="countCard" :style="{backgroundColor: bgColor}">
    <p class="title">{{title}}</p>
    <p class="sub_title">{{subTitle}}</p>
  </div>
</template>

<script>
  export default {
    name: "CountCard",
    props: ['bgColor', 'title', 'subTitle'],
    data() {
      return {}
    },
  }
</script>

<style scoped lang="less">
  .countCard {
    .title {
      text-align: left;
      font-size: 14px;
      color: white;
      margin: 0;
    }

    .sub_title {
      text-align: right;
      font-size: 25px;
      font-weight: bold;
      color: white;
      margin: 0;
    }

    border-radius: 5px;
    padding: 5px;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

</style>